<template>
<div>
  
   <div v-if="FI"  class='sku'>
        <div class='top'>
            <div v-bind:style="{ 'background-image': 'url('+skuColor[3]+')','background-repeat':'no-repeat','background-size':'cover' }" class='left'>

            </div>
            <div class='right'>
                <p>{{skuColor[2]}}</p>
                <p>￥{{priceList}} </p>
                <p>尺码：<span :key='index' v-for="(val,index) in skuColor[1]"> {{val.sizeName}}</span></p>
            </div>
        </div>
        <div class='box list-wrapper list-wrapper-hook wrap_right' id='wrapper'  >
        
            <div class='auto'>
        
                <div  :key='index' v-for="(val,index) in skuData"   class='num'>
                    <span>{{val.name}} </span>
                    <div class="computations">
                        <p @click.stop='reduce(index,val.num)'>-</p>
                        <input disabled style="background:#fff;"   v-model="val.chosseNum" type='tel'/>
                        <p @click.stop='add(index,val.num)'>+</p>
                    </div>
                     <span>库存：{{val.num}} </span>
                </div>
            </div>
        </div>   
        <div @click.stop="submit" class='submit'>确定</div>
   </div>
   <!-- <transition name="router-slid" mode="out-in">
            <router-view></router-view> -->
        <!-- </transition> -->
  </div>  
</template>

<script>
import wx from 'wx';
 
 
    // import {mapState, mapMutations} from 'vuex'
let numeral = ''
export default {
  name: "skuModule",
  components: {},
  props:['skuColor'],
    
 




  data() {
    return {
       skuData:'',
       quantity:'56',
       priceList:[],
       skuColor:this.skuColor,
       FI:false

    };
  },
 
  onLoad() { 
    // console.log(this.skuColor)
    this.initialize();
    
     
  },
  onUnload(){
     this.FI=false;
  },
  methods: { 
    //  ...mapMutations([
    //             'GET_GOODSDATA',
    //         ]),
    initialize(){
        let arr=[];
        let data =this.skuColor[0]

       if(this.skuColor[8].price){// 有活动的 单独价格  
         for(let i=0; i<data.length;i++){
            let newData={'name':data[i].colorName,'colorSno':data[i].colorSno,'priceDiff': this.skuColor[6],'shareId':this.skuColor[7],'num':data[i].num,'price':this.skuColor[8].price,'chosseNum':0,'img':this.skuColor[3],'productId':this.skuColor[4],'skuSizeNum':this.skuColor[1].length,'enrollId':this.skuColor[8].enrollId}
            arr.push(newData)
        }
       }else{
         for(let i=0; i<data.length;i++){
            let newData={'name':data[i].colorName,'colorSno':data[i].colorSno,'priceDiff': this.skuColor[6],'shareId':this.skuColor[7],'num':data[i].num,'price':data[i].price,'chosseNum':0,'img':this.skuColor[3],'productId':this.skuColor[4],'skuSizeNum':this.skuColor[1].length}
            arr.push(newData)
        }
       }
      
    
        this.skuData=arr;
    
        this.priceList=this.price(this.skuColor[0]) +this.skuColor[6]
      
    
     this.FI=true;
        // console.log(this.priceList)
    },
    price(val){ //过滤方法
      // console.log(val)
        let arr=[]
        if(this.skuColor[8].price){
              for(let i=0;i<val.length;i++){
                arr.push(this.skuColor[8].price)
              }
        }else{
             for(let i=0;i<val.length;i++){
                arr.push(val[i].price)
              }
        }
       
        
        let maxInNumbers = Math.max.apply(Math, arr);
        let minInNumbers = Math.min.apply(Math, arr);
         
       let   value=0
       maxInNumbers==minInNumbers?value=minInNumbers:minInNumbers=maxInNumbers+'--'+minInNumbers
      // console.log(value)
       return value
    } ,
    reduce(index,inventory){
        if(this.skuData[index].chosseNum>=this.skuColor[1].length){
            this.skuData[index].chosseNum=this.skuData[index].chosseNum-parseFloat(this.skuColor[1].length) ;
        }else{
           this.skuData[index].chosseNum=0
        }
    },
    add(index,inventory){
      
      if(this.skuData[index].chosseNum<inventory){

        if(inventory-this.skuData[index].chosseNum>=this.skuColor[1].length){
            this.skuData[index].chosseNum=this.skuData[index].chosseNum+parseFloat(this.skuColor[1].length) ;
        }else{
             this.skuData[index].chosseNum=inventory;
        }
          
      } 
      
    },
    submit(){
      wx.showLoading({
         title: '加载中' // 数据请求前loading
      })
       let dataList =[]
       console.log(this.skuData,998)
       for(let i=0;i<this.skuData.length;i++){ // 重组数据
         if(this.skuData[i].chosseNum>0){
             dataList.push(this.skuData[i])
         }
        
       }
      let data ={'list':dataList,'skuSize':this.skuColor[1],'storeId':this.skuColor[5],'priceDiff':this.skuColor[6]}
      let chooseNum=0
      for(let i=0;i<dataList.length;i++){
        chooseNum=chooseNum+parseFloat(dataList[i].chosseNum) 
      }
      console.log(data)
       if(chooseNum>0){
          this.$emit('close')
            wx.navigateTo({
              url: '../shopping/checkout'
            //   /pages/shopping/checkout
          });
          console.log(data)
           wx.setStorageSync('otherData', data );
           
            
       }else{
            wx.showToast({
              title: '至少选择一个规格',
              icon: 'none'
            })
       }
     
    }
  }
};
</script>

<style lang="scss" scoped>
.router-slid-enter-active {
  transition: all 0.4s;
}
.router-slid-enter {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
.class1 {
  border: 1px solid rgba(48, 48, 48, 1);
  color: rgba(48, 48, 48, 1);
  border-radius: 5px;
}
.class2 {
  border: 1px solid rgba(242, 52, 52, 1);
  color: rgba(242, 52, 52, 1);
  border-radius: 5px;
}
.sku {
  z-index: 9992;
  position: fixed;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
 
  .submit {
    line-height: 50px;
    background: #FD6D1F;
    text-align: center;
    margin-top: 29px;
    font-size: 16px;
    color: #fff;
  }
  .box {
    width: 94vw;
    margin: 0 auto;
    margin-top: 8px;
    font-size: 13px;
    height: 270px;
    position: relative;
    .auto {
       
     
      
      .skuTitle {
        color: #969696;
        margin-right: 7px;
        line-height: 28px;
        margin-bottom: 5px;
      }
      .specification {
        width: 100%;;
        span {
          display: inline-block;
          font-size: 13px;
          line-height: 18px;
          padding: 4px 20px;
          margin-right: 10px;
          margin-bottom: 5px;
          // border: 1px solid #303030;
          border-radius: 5px;
        }
      }

      .class1 {
        border: 1px solid rgba(191, 191, 191, 1);
        color: rgba(191, 191, 191, 1);
      }
      .class4 {
        border: 1px solid rgba(191, 191, 191, 1);
        color: rgba(191, 191, 191, 1);
      }
      .class2 {
        border: 1px solid rgba(242, 52, 52, 1);
        color: rgba(242, 52, 52, 1);
      }
      .class3 {
        border: 1px solid #303030;
        color: #303030;
      }
    }
    .num {
      background: #fff;
      height: 54px;
      line-height: 54px;
      border-bottom:1px solid rgba(51,51,51,0.1);
      padding: 0 5vw;
      span:nth-child(1){
        color: #333;
        font-size: 13px;
      }
      span:nth-child(3){
        color: #333;
        font-size: 13px;
        opacity: 0.56;;
        float: right;
        margin-right: 5vw;
      }
      span {
        color: rgba(150, 150, 150, 1);
        margin-right: 7px;
        float: left;
        line-height: 54px;
      }
      .computations {
        float: right;
        color: #000;

        line-height: 26px;
        margin-top: 11px;
        height: 30px;
        border: 1px solid rgba(191, 191, 191, 1);
        border-radius: 5px;
        width: 94px;

        p {
          float: left;
          width: 29px;
          text-align: center;
          font-size: 18px;
          line-height: 30px;
        }
        input {
          text-align: center;
          width: 34px;
          font-size: 14px;
          float: left;
          line-height: 30px;
          height: 30px;;
        }
      }
    }

    .specification {
      margin-top: 5px;
      li {
        margin-top: 10px;
        font-size: 13px;
        .appellation {
          float: left;
          color: rgba(150, 150, 150, 1);
          margin-right: 7px;
          height: 100%;
          line-height: 28px;
        }
        .classification {
          float: left;
          line-height: 25px;
          font-size: 0;
          width: 80vw;
          p {
            display: inline-block;
            font-size: 13px;
            line-height: 18px;
            padding: 4px 20px;
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }
      }
    }
    .selected {
      height: 18px;
      span:nth-child(1) {
        color: rgba(150, 150, 150, 1);
        margin-right: 7px;
      }
      span:nth-child(2) {
        color: rgba(48, 48, 48, 1);
      }
      p:nth-child(1) {
        float: left;
      }
      p:nth-child(2) {
        float: right;
      }
    }
  }
  .top {
    width: 94vw;
    margin: 0 auto;
    height: 90px;
    border-bottom: 1px solid rgba(239, 239, 239, 1);
    position: relative;
    .left {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      border: rgba(235, 235, 235, 1) 1px solid;
      float: left;
      margin-top: -25px;
    }
    .right {
      margin-top: 5px;
      margin-left: 15px;
      float: left;
      p:nth-child(1) {
        overflow: hidden;
        height: 36px;
        line-height: 18px;
        width: 54vw;
        font-size: 13px;
        color: #000;

        text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
      }
      p:nth-child(2) {
        font-size: 15px;
        color: rgba(255, 84, 84, 1);
        line-height: 22px;
        margin-top: 1px;
        span {
          font-size: 12px;
        }
      }
      p:nth-child(3) {
        // display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
        width: 54vw;
       font-size: 12px;
       color: #333;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
  
      }
    }
  }
    .wrap_right {
      left: 0;
      width: 100vw;
      height: 100%;
      overflow-y: scroll;
      height: 250px;;
      -webkit-overflow-scrolling: touch;
      background-color: #fff;
    }
.list-wrapper {
    width: 100vw;
    bottom:0;
    right: 0;  
    background: rgba(243,244,245,1);
     height:250px;
     overflow-y: scroll;
}
 
}
@media only screen and (width: 375px) and (height: 724px) {
  .sku {
    bottom: 34px;
  }
  
}
</style>
